<template>
	<view class="set-page">
		<view class="organization-msg">
			<view class="">
				<view class="" style="font-size: 28upx;color: #666666;">机构名称</view>
				<view class="" style="margin-left: 40upx;">
					<input type="text" v-model="organizationName" placeholder="请输入你的机构名称"/>
				</view>
			</view>
			<view class="">
				<view class="" style="font-size: 28upx;color: #666666;">所在地区</view>
				<view class="" style="margin-left: 40upx;width: 400upx;flex-grow:2; display: flex;justify-content: space-between;" @click="chooseCity">
					<input type="text" disabled v-model="pickerText" placeholder="请选择省、市、区（县)"/>
					<image :src="imglink + 'organization/active_icon_go.png'" mode=""></image>
				</view>
			</view>
			<view class="" style="border-bottom: none;">
				<view class="" style="font-size: 28upx;color: #666666;">详细地址</view>
				<textarea style="margin-left: 40upx;height: 145upx;" v-model="detailsAdre" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="person-msg">
			<view class="user-name">
				<view class="" style="font-size: 28upx;color: #666666;">联系人</view>
				<view class="" style="margin-left: 68upx;flex-grow: 1;">
					<input type="text" v-model="userName" placeholder="请输入联系人姓名"/>
				</view>
			</view>
			<view class="user-name">
				<view class="" style="font-size: 28upx;color: #666666;">联系号码</view>
				<view class="" style="margin-left: 40upx;flex-grow: 1;">
					<input type="text" v-model="userPhone" placeholder="请输入手机号"/>
				</view>
			</view>
			<view class="user-name" style="border-bottom: none;">
				<view class="" style="font-size: 28upx;color: #666666;">验证码</view>
				<view class="" style="margin-left: 68upx;flex-grow: 1;">
					<input type="text" v-model="authCode" placeholder="请输入验证码" style="width: 300upx;"/>
					<view class="security-code" v-if="show_Code" @click="CodeClick">{{securityCode}}</view>
					<view class="again-code" v-if="!show_Code">{{count}} s</view>
				</view>
			</view>
		</view>
		<view class="register-shop">
			<view class="">立刻领取<text>7</text>天VIP会员</view>
			<view class="" @click="personShop">
				注册自己的专属店铺
			</view>
		</view>
		<!-- 地址选择 -->
		<view v-if="visible">
			<picker-view class="birthday" :indicator-style="indicatorStyle" :value="index" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="item in provinceList" :key="item.province_id">{{item.province}}省</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in cityListDetails" :key="item.city_id">{{item.city}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="item in prefectureDetailList" :key="item.country_id">{{item.country}}</view>
				</picker-view-column>
			</picker-view>
			<view @click="sure" class="birthday-tkang" v-if="visible"></view>
			<view class="determine" @click="sure">确定</view>
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import {formatFullTime} from '@/common/util.js'
	export default{
		components:{mpvuePicker,mpvueCityPicker},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				token:'',
				pickerText: '',
				securityCode:'验证码',
				organizationName:'',
				detailsAdre:'',
				userName:'',
				userPhone:'',
				authCode:'',
				code_type:'register',
				timer: null,
				count: '',
				show_Code: true,
				provinceId:'',
				cityiD:'',
				province:'',
				city:'',
				provinceList:[],
				cityList:[],
				visible:false,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				index:[0,0,0],
				cityListDetails:[],
				value:[0,0,0],
				prefecture:'',
				prefectureId:'',
				prefectureDetailList:[]
			}
		},
		onLoad(options){
			
			if(options.token){
				this.token = options.token
				uni.setStorageSync('token', options.token);
				this.$store.commit('updateToken',options.token)
			}
			
		},
		onShow() {
			this.gainShopId()
			this.getCity()
		},
		methods:{
			//地区
			bindChange: function (e){
				this.value  =e.detail.value
				this.cityListDetails = this.cityList[e.detail.value[0]]
				this.prefectureDetailList = this.cityListDetails[e.detail.value[1]].children
			},
			sure(){
				this.visible = false
				this.tkang = false
				this.province = this.provinceList[this.value[0]].province
				this.city = this.cityListDetails[this.value[1]].city
				this.provinceId = this.provinceList[this.value[0]].province_id
				this.cityiD = this.cityListDetails[this.value[1]].city_id
				this.prefecture = this.prefectureDetailList[this.value[2]].country
				this.prefectureId = this.prefectureDetailList[this.value[2]].country_id
				console.log(this.province,this.city,this.prefectureId)
				console.log(this.provinceId,this.cityiD,this.prefectureId)
				this.pickerText = `${this.province}省-${this.city}-${this.prefecture}`
			},
			getCity(){
				this.$api.gain_all_city({token:this.$store.getters.getToken}).then(res => {
					console.log(res)
					if(res.status){
						this.provinceList = res.list
						this.provinceList.forEach(item => {
							this.cityList.push(item.children)
						})
						this.cityListDetails = this.cityList[0]
						console.log(this.provinceList)
						this.prefectureDetailList = this.cityListDetails[0].children
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			gainShopId(){
				// console.log('gainShopId',this.token)
				let data = {
					token:this.token,
				}
				console.log(data,'gainShopId data')
				this.$api.judge_store(data).then(res => {
					console.log(res,'judge_store')
					if(res.status){
						// this.$store.commit('updataOrganId',res.customer_organization_id);
						this.$store.commit('updateStoreId',res.store_id);
						// uni.setStorageSync("OrganId",res.customer_organization_id)
						uni.setStorageSync("shopID",res.store_id)
						console.log(this.$store.getters.getStoreId,'this.$store.getters.getShopId')
						if(this.$store.getters.getStoreId){
							
							uni.redirectTo({
								url:'/pages/recommend/recommend?store_id=' + this.$store.getters.getStoreId
							})
						}
					}
				}).catch(err => {
					console.log(err,'this.$api.judge_store')
				})
			},
			chooseCity(){
				this.visible = true
				// this.$refs.mpvueCityPicker.show()
			},
			//验证码30s函数
			checkCode() {
				const TIME_COUNT = 30;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show_Code = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show_Code = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				} else {
					uni.showToast({
						title: "手机号不得为空！",
						duration: 2000,
						icon: "none"
					})
				}
			},
			// 获取验证码
			CodeClick(){
				let that = this;
				if (!((/^1(3|4|5|6|7|8|9)\d{9}$/).test(this.userPhone))) {
					uni.showToast({
						title: "手机号有误，请重新输入!",
						duration: 2000,
						icon: "none"
					})
				} else {
					this.checkCode();
					let data = {
						mobile:this.userPhone,
						code_type:this.code_type
					}
					this.$api.gainAuthCode(data).then(res => {
						console.log(res)
						if(res.status){
							uni.showToast({
								title: res.msg,
								icon:"none",
								duration:2000
							});
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								duration:2000
							});
							this.show_Code = false;
						}
					}).catch(err => {
						console.log(res)
					})
				}
			},
			// 注册机构
			personShop(){
				if(this.organizationName == ''){
					uni.showToast({
						title:"机构名称不得为空!",
						icon:"none",
						duration:2000
					})
					return false
				}
				
				if(this.detailsAdre == ''){
					uni.showToast({
						title:"详细地址不得为空!",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.userName == ''){
					uni.showToast({
						title:"联系人姓名不得为空",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.userPhone == ''){
					uni.showToast({
						title:"联系人号码不得为空",
						icon:"none",
						duration:2000
					})
					return false
				}
				if(this.authCode == ''){
					uni.showToast({
						title:"验证码不得为空!",
						icon:"none",
						duration:2000
					})
					return false
				}
				let time = formatFullTime(new Date().getTime())
				let data = {
					token:this.$store.getters.getToken,
					// customer_id:uni.getStorageSync('customer_id'),
					name:this.organizationName,
					code:this.authCode,
					address:this.detailsAdre,
					contact:this.userName,
					telephone:this.userPhone,
					date_added:time,
					status:'1',
					province:this.provinceId,
					city:this.cityiD,
					country_id:this.prefectureId
				}
				this.$api.organizationRegister(data).then(res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'机构注册成功',
							icon:'none',
							duration:2000
						})
						this.$store.commit('updataOrganId',res.customer_organization_id);
						this.$store.commit('updateStoreId',res.customer_store_id);
						uni.setStorageSync("OrganId",res.customer_organization_id)
						uni.setStorageSync("store_id",res.customer_store_id)
						setTimeout(()=> {
							uni.redirectTo({
								url:'/pages/recommend/recommend?store_id='+res.customer_store_id
							})
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
				// uni.switchTab({
				// 	url:'../home'
				// })
			}
		}
	}
</script>

<style>
	
	.birthday{
		position: fixed;
		left: 40upx;
		right: 40upx;
		margin: 0;
		transform: translate(0,-50%);
		top: 50%;
		bottom: 0;
		z-index: 888;
		height: 400upx;
		background: #fff;
		text-align: center;
	}
	.determine{
		position: fixed;
		top: 37%;right: 40upx;
		transform: translate(0,-50%);
		font-size: 35upx;
		color: #FFFFFF;
		padding: 20upx;
		z-index: 999;
		background: #FF8B46;
	}
	.birthday-tkang{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 300;
		opacity: 0.5;
		background: #000000;
	}
	page{
		background: #F5F6F9;
	}
	input,textarea{
		width: 100%;
		color: #333333;
		font-size: 28upx;
		text-align: left;
	}
	image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.set-page{
		width: 100%;
		height: 100%;
		padding-top: 2upx;
		box-sizing: border-box;
	}
	.organization-msg{
		width: 100%;
		height: 374upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.organization-msg>view{
		width: 100%;
		height: 100upx;
		padding: 28upx 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1upx solid #DEDEDE;
	}
	.organization-msg>view:last-child{
		height: 174upx;
	}
	.organization-msg>view:last-child>view{
		width: 148upx;
		height: 40upx;
	}
	.uni-title{
		
	}
	.person-msg{
		width: 100%;
		height: 300upx;
		margin-top: 20upx;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.user-name{
		width: 100%;
		height: 100upx;
		padding: 32upx 0 28upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		display: flex;
	}
	.user-name:last-child>view:last-child{
		display: flex;
		justify-content: space-between;
	}
	.user-name:last-child>view:last-child .security-code{
		color: #FF8B46;
		font-size: 28upx;
		text-align: right;
	}
	.user-name:last-child>view:last-child .again-code{
		color: #999999;
		font-size: 28upx;
		text-align: right;
	}
	.register-shop{
		width: 670upx;
		margin: 0 auto;
		text-align: center;
		margin-top: 100upx;
	}
	.register-shop>view:first-child{
		color: #999999;
		font-size: 28upx;
	}
	.register-shop>view:first-child>text{
		color: #FF391F;
	}
	.register-shop>view:last-child{
		height: 100upx;
		line-height: 100upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 10upx;
		font-size: 32upx;
	}
</style>
